<template>
	<view class="main">
		<view class="content">
			<view class="ca" style="margin: 0px 16px;">
				<view class="x">反馈内容</view>
				<view class="ae">
					<u--textarea v-model="query.fknr" count height="100px" maxlength='500'
						style="margin-top: 16px;"></u--textarea>
				</view>
			</view>
			<div style="margin: 16px 0px;"><u-line></u-line></div>

			<view class="cb" style="margin: 0px 16px;">
				<view class="x">现场照片</view>
				<view class="be"
					style="border: 1px solid #ceccca;height: 72px;margin-top: 16px;display: flex;border-radius: 4px;">
					<view class="aaa" style="display: flex;" v-for="(item,index) in fileTempList" :key="index">
						<view style="position: relative; margin-top: 8px; margin-left: 8px;">
							<u--image :src="item.url" width="55px" height="55px"></u--image>
							<u-icon name="close" style="position: absolute; top: 2px; right: 2px;"
								@click="removeItem(index)"></u-icon>
						</view>
					</view>
					<u--image :src="upLoadUrl" @click="getFile" v-show="fileTempList.length<5" width="55px"
						height="55px" style="margin-top: 8px;margin-left: 8px;"></u--image>
				</view>
			</view>
		</view>
		<view class="bottom" style="margin: 24px 16px 0px 16px;">
			<u-button @click="submit" text="提 交" color="#FF5000" style="border-radius: 4px;"></u-button>
			<u-button @click="reset" text="重 置" color="#FF5000" plain
				style="margin-top: 8px;border-radius: 4px;"></u-button>
		</view>
		<div style="height: 16px;"></div>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		upProStatus,
		uploadFileOfQuestion
	} from '@/common/api.js'
	export default {
		onLoad: function(option) {
			this.query.id = option.id
		},
		onShow() {

		},
		data() {
			return {
				upLoadUrl: require("@/static/icons/xjyw/add.png"),
				/* 请求体参数 */
				wstoken: '',
				query: {
					id: 0,
					fknr: '',
					fkfj: '',
					bz: ''
				},
				fileNum: null,
				fileTempList: [],


			}
		},
		methods: {
			/* 图片上传 */
			async getWsToken() {
				let that = this
				window.croods.customPlugin({
					action: "UserPlugin.login",
					params: {},
					success: function(res) {
						that.wstoken = res.token
					},
					fail: function(msg) {
						that.$u.toast(msg);
					}
				});
			},
			getFile() {
				let that = this
				window.croods.customPlugin({
					action: 'ServicePermissionPlugin.uploadMaterial',
					params: {
						reason: "获取相机、文件权限",
						imgCount: "1",
						uploadTitle: "请选择上传方式",
						uploadType: "4",
					},
					success: function(res) {
						let tfile = res.files[0]
						if (res.flag) {
							let temp = tfile.file.replace(/[\r\n]/g, "")
							let url = 'data:' + tfile.type + ';base64,' + temp
							tfile.url = url
							that.fileTempList.push(tfile)
						} else {
							that.$u.toast('格式错误，上传失败');
						}
					},
					fail: function(msg) {
						if (msg != null || msg != undefined) {
							that.$u.toast(msg);
						} else {
							that.$u.toast('照片上传失败');
						}
					}
				});
			},
			removeItem(index) {
				this.fileTempList.splice(index, 1);
			},
			async getIds() {
				let that = this
				let fj = '';
				/* 皖事通令牌 */
				if (that.wstoken == '') {
					that.$u.toast('获取用户信息失败，请刷新界面或重新登录')
					return
				}
				let promises = that.fileTempList.map(async item => {
					let temp = {
						wstoken: that.wstoken,
						bizType: "public",
						file: item.file,
						fileName: item.name,
						fileType: item.type
					}
					let res = await uploadFileOfQuestion(temp);
					if (res != undefined || res != null) {
						fj += res.id + ';'
					}
				})
				await Promise.all(promises);
				return fj;
			},
			/* 重置 */
			reset() {
				this.query.fknr = ''
				this.query.bz = ''
				this.fileTempList = []
			},

			/* 提交 */
			async submit() {
				let that = this

				/* 现场照片附件 */
				if (that.fileTempList.length == 0) {
					that.$u.toast('现场照片未上传')
					return
				}
				let fj = await that.getIds()
				that.query.fkfj = fj.slice(0, -1)

				/* 反馈内容 */
				if (that.query.fknr == '') {
					that.$u.toast('请填写反馈内容')
					return
				}
				upProStatus(that.query).then(res => {
					if (res.msgCode && res.msgCode == '200') {
						that.$u.toast('提交成功');
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					} else {
						that.$u.toast('反馈失败');
					}
				})
			}

		},
		mounted() {
			this.getWsToken()
		}
	}
</script>

<style scoped>
	.main {
		margin-top: 16px;
		background-color: #FAFAFA;
	}

	.x {
		font-size: 14px;
		color: #999999;
		font-family: 'PingFang SC';
	}
</style>